<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="../images/yc.png" type="image/x-icon">
<link rel="stylesheet" href="../css/layui.css"  media="all">
<link rel="stylesheet" href="../css/witch.css"  media="all">
</head>
    <body style="">
        <br>
        <div class="demoTable">
            <span class="navy_padding">姓名</span>
            <div class="layui-inline">
              <input class="layui-input" name="id" autocomplete="on">
            </div>
               <span class="navy_padding">手机号码</span>
            <div class="layui-input-inline">
               <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
            <button type="button" class="layui-btn layui-btn-radius"> 查询  </button>
            <button type="button" class="layui-btn layui-btn-warm layui-btn-radius" onclick="add()"> 添加  </button>
        </div>
        
        <div id="update_div"></div>
        
    <table class="layui-hide" id="admin_data" lay-filter="test"></table>
    <div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" lay-id="admin_data" style=" ">
        <div class="layui-table-tool">
            <div class="layui-table-tool-temp">
                <div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
                <div class="layui-inline" lay-event="update"><i class="layui-icon layui-icon-edit"></i></div>
                <div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>
            </div>
            <div class="layui-table-tool-self">
                <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS"><i
                        class="layui-icon layui-icon-cols"></i></div>
                <div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT"><i
                        class="layui-icon layui-icon-export"></i></div>
                <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i
                        class="layui-icon layui-icon-print"></i></div>
            </div>
        </div>
        <div id="app">
        <div class="layui-table-box">
            <div class="layui-table-header">
                <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                    <thead>
                        <tr>
                            <th data-field="0" data-key="1-0-0" data-unresize="true" class=" layui-table-col-special">
                                <div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox"><input
                                        type="checkbox" name="layTableCheckbox" lay-skin="primary"
                                        lay-filter="layTableAllChoose">
                                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                            class="layui-icon layui-icon-ok"></i></div>
                                </div>
                            </th>
                            <th data-field="ano" data-key="1-0-1" data-unresize="true" class=" layui-unselect">
                                <div class="layui-table-cell laytable-cell-1-0-1" align="center"><span>编号</span><span
                                        class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"
                                            title="升序"></i><i class="layui-edge layui-table-sort-desc"
                                            title="降序"></i></span></div>
                            </th>
                            <th data-field="aname" data-key="1-0-2" class="hi">
                                <div class="layui-table-cell laytable-cell-1-0-2" align="center"><span>用户名</span></div>
                            </th>
                            <th data-field="pwd" data-key="1-0-3" class="hi">
                                <div class="layui-table-cell laytable-cell-1-0-3" align="center"><span>密码</span></div>
                            </th>
                            <th data-field="sex" data-key="1-0-4" class=" layui-unselect hi">
                                <div class="layui-table-cell laytable-cell-1-0-4" align="center"><span>性别</span><span
                                        class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"
                                            title="升序"></i><i class="layui-edge layui-table-sort-desc"
                                            title="降序"></i></span></div>
                            </th>
                            <th data-field="addr" data-key="1-0-5" class="hi">
                                <div class="layui-table-cell laytable-cell-1-0-5" align="center"><span>城市</span></div>
                            </th>
                            <th data-field="number" data-key="1-0-6" class=" layui-unselect hi" >
                                <div class="layui-table-cell laytable-cell-1-0-6" align="center"><span>登入次数</span><span
                                        class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"
                                            title="升序"></i><i class="layui-edge layui-table-sort-desc"
                                            title="降序"></i></span></div>
                            </th>
                            <th class="layui-table-patch">
                                <div class="layui-table-cell" style="width: 0.4px;"></div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="layui-table-body layui-table-main">
                <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                    <tbody>
                        <tr data-index="0" class="">
                            <td data-field="0" data-key="1-0-0" class="layui-table-col-special">
                                <div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox"><input
                                        type="checkbox" name="layTableCheckbox" lay-skin="primary">
                                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                            class="layui-icon layui-icon-ok"></i></div>
                                </div>
                            </td>
                            <td data-field="ano" data-key="1-0-1" align="center" class="hi">
                                <div class="layui-table-cell laytable-cell-1-0-1">1001</div>
                            </td>
                            <td data-field="aname" data-key="1-0-2" data-edit="text" align="center" class="hi">
                                <div class="layui-table-cell laytable-cell-1-0-2">navy</div>
                            </td>
                            <td data-field="pwd" data-key="1-0-3" data-edit="text" align="center" data-content=""
                                class="hi">
                                <div class="layui-table-cell laytable-cell-1-0-3"><em>.....</em></div>
                            </td>
                            <td data-field="sex" data-key="1-0-4" data-edit="text" align="center" class="hi">
                                <div class="layui-table-cell laytable-cell-1-0-4">男</div>
                            </td>
                            <td data-field="addr" data-key="1-0-5" align="center" class="hi">
                                <div class="layui-table-cell laytable-cell-1-0-5">湖南交通工程学院</div>
                            </td>
                            <td data-field="number" data-key="1-0-6" align="center" class="hi">
                                <div class="layui-table-cell laytable-cell-1-0-6">59</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="layui-table-fixed layui-table-fixed-l">
                <div class="layui-table-header">
                    <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                        <thead>
                            <tr>
                                <th data-field="0" data-key="1-0-0" data-unresize="true"
                                    class=" layui-table-col-special">
                                    <div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox"><input
                                            type="checkbox" name="layTableCheckbox" lay-skin="primary"
                                            lay-filter="layTableAllChoose">
                                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                                class="layui-icon layui-icon-ok"></i></div>
                                    </div>
                                </th>
                                <th data-field="ano" data-key="1-0-1" data-unresize="true" class=" layui-unselect">
                                    <div class="layui-table-cell laytable-cell-1-0-1" align="center">
                                        <span>编号</span><span class="layui-table-sort layui-inline"><i
                                                class="layui-edge layui-table-sort-asc" title="升序"></i><i
                                                class="layui-edge layui-table-sort-desc" title="降序"></i></span></div>
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="layui-table-body" style="height: auto;">
                    <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
                        <tbody>
                            <tr data-index="0" class="">
                                <td data-field="0" data-key="1-0-0" class="layui-table-col-special">
                                    <div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox"><input
                                            type="checkbox" name="layTableCheckbox" lay-skin="primary">
                                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i
                                                class="layui-icon layui-icon-ok"></i></div>
                                    </div>
                                </td>
                                <td data-field="ano" data-key="1-0-1" align="center" class="">
                                    <div class="layui-table-cell laytable-cell-1-0-1">1001</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        </div>
        <style>
            .laytable-cell-1-0-0 {
                width: 48px;
            }

            .laytable-cell-1-0-1 {}

            .laytable-cell-1-0-2 {}

            .laytable-cell-1-0-3 {}

            .laytable-cell-1-0-4 {}

            .laytable-cell-1-0-5 {}

            .laytable-cell-1-0-6 {}
        </style>
    </div>
    <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        
        <script type="text/html" id="checkboxTpl">
          <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
        </script>
        
        <script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
        <script src="../js/layui.all.js" charset="utf-8"></script>
         
        <script>
        layui.use('table', function(){
            var table = layui.table, form = layui.form;
            /**table.render({
                elem: '#admin_data',
                url:'/admin/list',
                toolbar: 'default', //开启头部工具栏，并为其绑定左侧模板
                title: '管理员信息表',
                cellMinWidth: 120,
                id: "admin_data",
                cols: [[
                  {type: 'checkbox', fixed: 'center'},
                      {field:'ano', title:'编号',fixed: 'center', unresize: true, sort: true, align: 'center'},
                    {field:'aname', title:'用户名', align: 'center', edit: 'text'},
                    /**{field:'email', title:'邮箱', align: 'center', edit: 'text', templet: function(res){
                        return '<em>'+ res.email +'</em>'
                      }},
                      {field:'pwd', title:'密码', align: 'center', edit: 'text', templet: function(res){
                        return '<em>.....</em>'
                      }},
                    {field:'sex', title:'性别', edit: 'text', align: 'center', sort: true},
                    {field:'addr', title:'城市', align: 'center'},
                    {field:'number', title:'登入次数', align: 'center', sort: true},
                    //{field:'joinTime', title:'加入时间', align: 'center'},
                    //{fixed: 'right', title:'操作', toolbar: '#barDemo', align: 'center'},
                    //{field:'status', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
                ]]
            });**/
            
            //监听锁定操作
            form.on('checkbox(lockDemo)', function(obj){
                layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            });
            
            // 头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data; //获取选中的数据;
                switch(obj.event){
                    case 'add':
                        layer.msg('添加');
                      break;
                      case 'update':
                        if(data.length === 0){
                          layer.msg('请选择一行');
                        } else if(data.length > 1){
                          layer.msg('只能同时编辑一个');
                        } else {
                          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                        }
                        
                          //页面层
                        layer.open({
                          type: 1,
                          skin: 'layui-layer-rim', //加上边框
                          area: ['420px', '240px'], //宽高
                          content: $("#update_div")
                        });
                        
                      break;
                      case 'delete':
                        if(data.length === 0){
                          layer.msg('请选择您要删除的数据...', {icon:5,offset:"auto",time:2000});
                        } else {
                            layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？',{icon: 3, title: "确认"}, function(index){
                                var arrs = [];
                                for (var i = 0; i < data.length; i ++) {
                                    arrs.push(data[i].id);
                                }
                                console.info(arrs);
                                layer.close(index);
                                table.reload('admin_data',  // table id
                                        { 
                                            where: { id: 1, status: 2 }, // 参数
                                             page: {
                                               curr: 1 // 重新从第 1 页开始
                                             }
                                  });
                            });
                        }
                      break;
                };
            });
          
            // 监听行工具事件
            table.on('tool', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                      layer.confirm('数据一旦删除将不能恢复，您确定要删除吗？', {icon: 3}, function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                      layer.prompt({
                        formType: 3,
                        value: data.email
                      }, function(value, index){
                        obj.update({
                            email: value
                        });
                        layer.close(index);
                      });
                }
            });
        });
        
        function add() {
            // layer.msg('添加成功...', {icon: 6, offset:"auto", title: "成功提示", time:2000});
            // layer.msg('添加失败...', {icon:5, offset:"auto", time:2000});
            //显示自动关闭倒计秒数
        
            layer.alert('添加成功...', {
              time: 5*1000
              ,success: function(layero, index){
                var timeNum = this.time/1000, setText = function(start){
                  layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                };
                setText(!0);
                this.timer = setInterval(setText, 1000);
                if(timeNum <= 0) clearInterval(this.timer);
              }
              ,end: function(){
                clearInterval(this.timer);
              }
            });
        }
        </script>
<script type="text/javascript" src="../../js/show-dialog.js"></script>
<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/axios.js"></script>
<script type="text/javascript" src="../../js/qs.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			
		},
		methods:{
			
		},
		mounted(){
			axios.get("/admin/list?page=1&limit=4").then(rt=>{
				
			})
		},
		created(){
			
		}
	})
</script>
</body>
</html>